<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div style="padding: 20px">
      <div class="personal-box"></div>
      <div class="pos-relative w-full h-63px p-5">
        <div class="bg-white w-30 h-30 box-radius  flex justify-center items-center pos-absolute">
          <a-avatar src="https://img.alicdn.com/imgextra/i1/O1CN01EI93PS1xWbnJ87dXX_!!6000000006451-2-tps-150-150.png" :size="100">

<!--            <a-image src="../../../assets/images/toni-hukkanen-GeWnWHgGXls-unsplash.png"></a-image>-->
          </a-avatar>
        </div>
        <div class="float-right">
          <a-space>
            <a-button >取消</a-button>
            <a-button type="primary">保存</a-button>
          </a-space>

        </div>
      </div>
      <a-card class="m-5">
        <a-tabs v-model:activeKey="activeKey">
<!--          <a-tab-pane key="1" tab="我的详情">-->
<!--            <a-form layout="vertical" :model="formState">-->
<!--              <a-row :gutter="[20,20]" class="p-5">-->
<!--                <a-col :xs="24" :sm="8">-->
<!--                  <a-form-item label="姓名">-->
<!--                    <a-input v-model:value="formState.name" placeholder="姓名">-->
<!--                      <template #prefix>-->
<!--                        <user-outlined />-->
<!--                      </template>-->
<!--                    </a-input>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :xs="24" :sm="8">-->
<!--                  <a-form-item label="电话">-->
<!--                    <a-input v-model:value="formState.name" placeholder="电话">-->
<!--                      <template #prefix>-->
<!--                        <TabletOutlined />-->
<!--                      </template>-->
<!--                    </a-input>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :xs="24" :sm="8">-->
<!--                  <a-form-item label="邮箱">-->
<!--                    <a-input v-model:value="formState.name" placeholder="邮箱">-->
<!--                      <template #prefix>-->
<!--                        <MailOutlined />-->
<!--                      </template>-->
<!--                    </a-input>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :xs="24" :sm="8">-->
<!--                  <a-form-item label="角色">-->
<!--                    <a-input v-model:value="formState.name" placeholder="角色">-->
<!--                      <template #prefix>-->
<!--                        <TeamOutlined />-->
<!--                      </template>-->
<!--                    </a-input>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--              </a-row>-->

<!--            </a-form>-->
<!--          </a-tab-pane>-->
          <a-tab-pane key="2" tab="密码">
            <BasicForm @register="registerForm" />
            <div style="text-align: center">
              <Button type="primary" @click="submit">修改密码</Button>
            </div>
          </a-tab-pane>
<!--          <a-tab-pane key="3" tab="安全设置">-->
<!--            <a-row :gutter="[20,20]">-->
<!--              <a-col :xs="24" :sm="12">-->
<!--                <a-card>-->
<!--                  <div class="flex justify-between">-->
<!--                    <div class="flex items-center">-->
<!--                      <div>-->
<!--                        <div>登录密码</div>-->
<!--                        <div>重置时自动退出当前账号</div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <a-button type="primary">-->
<!--                        修改-->
<!--                      </a-button>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </a-card>-->
<!--              </a-col>-->
<!--              <a-col :xs="24" :sm="12">-->
<!--                <a-card>123</a-card>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--            <a-alert class="mt-5" message="确认注销,请确认此操作,一旦确认,此操作则无法撤销" type="warning" show-icon>-->
<!--              <template #icon><SmileOutlined /></template>-->
<!--              <template #action>-->
<!--                <a-button size="small" danger>账号注销</a-button>-->
<!--              </template>-->
<!--            </a-alert>-->
<!--          </a-tab-pane>-->
        </a-tabs>
      </a-card>

    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watch } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { UserOutlined, MailOutlined, TabletOutlined, TeamOutlined, SmileOutlined } from '@ant-design/icons-vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { accountFormSchema } from './account.data';
  import { Button, message } from 'ant-design-vue';
  import { updateUserAPI } from '@/api/demo/user';

  defineOptions({ name: 'User' });
  const activeKey = ref('2');
  const formState = ref({});
  const [registerForm, { getFieldsValue }] = useForm({
    labelWidth: 150,
    baseColProps: { span: 24 },
    schemas: accountFormSchema,
    showActionButtonGroup: false,
  });

  async function submit() {
    let params = await updateUserAPI({ ...getFieldsValue() });
    console.log(params);
    message.success('修改完成');
  }
</script>
<style scoped>
  .personal-box {
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0;
    background-image: url('@/assets/images/Maskgroup.png');
  }
  .box-radius {
    border-radius: 50%;
    top:-95%;
    left: 20px;
  }
</style>
